<template>
    <div>
        <x-header style="margin:0;">请假</x-header>
        <div class="search" >
            <input class="search_box"  placeholder="搜索" v-model="search_msg"/>
            <input class="search_btn" type="submit" value="搜索" @click="search">
        </div>
   
        <div id="show_all_teacheres">
            <ul>
                <li  v-for="(item,index) in teacheres" class="all_teacheres">
                    <img style="width:41px;height:41px;border-radius:20.5px;" :src="item.avatar" alt="">
                    <span class="t_name">{{item.name}}</span>
                    <span class="t_mobile">{{item.mobile}}</span>
                    <span class="t_email">{{item.email}}</span>
                    <span class="checkbox">
                        <input class="check_input" type="checkbox" v-model="item.leavestate" />
                    </span>
                </li>
            </ul>
        </div>
        <div class="btm">
            <x-button type="default"  class="start_change" @click.native="submit">完成</x-button>
        </div>
    </div>
</template>

<script>
import { XHeader,Flexbox,XInput, FlexboxItem,XButton} from 'vux'
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            type:1,
            search_msg:'',
            subclassid:this.$route.query.subclassid,
        }
    },
    created(){
        this.init()
        console.log(this.teacheres)
    },
    computed:{
        teacheres(){
            return this.$store.state.user.classleaveinfo
        }
    },
    components:{
        XHeader,
        Flexbox, 
        FlexboxItem,
        XInput,
        XButton
    },
    methods:{
        ...mapActions({
            getUserInfo:'getUserInfo',
            updateLeaState:'updateLeaState'
        }),
        init(){
            var all = {
                "subclassid":this.subclassid,
                "type":0,
                "search":''
            }
            this.getUserInfo({vue: this,subclassid:this.subclassid,type:this.type,search:''}).then(rs => {
                    console.log("getUserInfo")
                }).catch(error => {
                    console.log(error)
                })
        },
        submit(){
            var userids=[];
            for(var i=0;i<this.teacheres.length;i++){
                const ifleave = this.teacheres[i].leavestate
                if(ifleave===1||ifleave===true){
                    userids.push(this.teacheres[i].id)
                }
            }
            var param = {
                "subclassid":this.subclassid,
                "userids":userids
            }
            console.log("request param",param)
            this.updateLeaState({vue: this,param}).then(rs => {
                    console.log("updateLeaState")
                    this.$router.go(-1)
                }).catch(error => {
                    console.log(error)
                })
        },
        search(){
            this.getUserInfo({vue: this,subclassid:this.subclassid,type:this.type,search:this.search_msg}).then(rs => {
                console.log("searchClassUsers",this.type)
            }).catch(error => {
                console.log(error)
            })
        }

    }
}
</script>

<style scoped>
   input::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #BDBDBD ;
    font-size: 12px;
    } 

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 
   .search{
       height:50px;
       margin:0;
       padding-top:7.5px;
   }
   .search_box{
       width:80%;
       height:32.5px;
       margin:0 0 10px 15px;
       padding:0;
       box-shadow:0 0  20px #EEEEEE;
       border-radius:5px;
       border: 0;
       background: url(../asset/images/magnifier.png) 10px 9px no-repeat;
       background-size: 14px 14px;
       padding-left:30px;
       outline: none;
   }
   .search_btn{
        width: 10%;
        height: 26.5px;
        background: 0;
        border: 0;
        color: #F25257;
        margin: 0px 10px 0px 0px;
        float: right;
        outline: none;
        margin-top: 5px;
        font-size: 14px;
        font-family: PingFangSC-Regular;;
   }
   .all_teacheres {
       position: relative;
       height:66px;
       margin-left: 17.5px;
       /* padding-top:10px;
       padding-bottom: 15px; */
   }
    .all_teacheres  img{
       position: absolute;
       top:10px;
   }
   .all_teacheres:last-child{
       margin-bottom: 50px;
   }
   .t_name{
       position: absolute;
       left:20%;
       top:23px;
       font-size:14px; 
       font-family: PingFangSC-Regular
   }
   .t_dept{
       position: absolute;
       left:45%;
       top:23px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
    .t_email{
       position: absolute;
       left:40%;
       top:23px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
    .t_mobile{
       position: absolute;
       left:40%;
       top:43px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
   .checkbox{
        position:absolute;
        left:89%;
        top:23px;
        width:16.5px;
        height:16.5px;
   }
   .checkbox input[type="checkbox"]{
        -webkit-appearance: none;
        -webkit-appearance:checked;
        background: url(../asset/images/unchecked.png) no-repeat;
        background-size: 16.5px 16.5px;
        border:none
   }
   .checkbox input[type="checkbox"]:checked{
        -webkit-appearance: none;
        -webkit-appearance:checked;
        background: url(../asset/images/checked.png) no-repeat;
        background-size: 16.5px 16.5px;
        border:none
   }
   .check_input{
        width:16.5px;
        height:16.5px;
   }
   .btm{
        width:100%;
        height:50px;
        background: rgba(0,0,0,0.10);
        text-align:center;
        line-height:50px;
        position: fixed;
        bottom: 0;
   }
   .start_change{
       display: inline-block;
        width:90%;
        height:35px;
        line-height: 35px;
        margin-top:7.5px;
        font-size: 14px;
        border:0.5px solid #F25257;
        color:#FFFFFF;
        background:#F25257;
        border-radius: 8px;
   }
</style>
